import $Element from "@/core/Element";
import { DrageMove, EDrageDirection } from "@/core/events/DrageMove";
import { DOMcreateElement } from "@/core/jsxFactory";

export default function HColorPickerCreater(mouseMoveFn: (evt: Event) => void, mouseUpFn: (evt: Event) => void) {
    const current = new $Element(
        <div className="color-picker-h">
            <div className="drag-bar"></div>
        </div>
    );
    const eventHandler = DrageMove(current, new $Element(".drag-bar"), {
        dragBothDirct: EDrageDirection.Y,
        forbidenOutRange: true,
        range: [-5, 0, 6]
    });
    current.addEventListener("mouseup", function (evt: Event) {
        const event = evt as MouseEvent;
        if (event.target == current.current) {
            current.getChildByClassName(".drag-bar")?.setStyleWithProp("top", event.offsetY + "px");
            // mouseUpFn(evt);
            event.preventDefault();
            event.stopPropagation();
            return false;
        }
    });

    eventHandler.addEventEndHook("mousemove", mouseMoveFn).addEventEndHook("mouseup", mouseUpFn);
    return current;
}